import { baseUrl } from '../../utils/config'
const { shared, timing, Easing, runOnJS, sequence } = wx.worklet;
const { get } = require('../../utils/request.js')
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    
  },

  /**
   * 组件的初始数据
   */
  data: {
    baseUrl: baseUrl,
    childName: "",
    headImgData: [],
    headImgAnimal: [],
    startX1: 0,
    startX2: 20,
    startX3: 40,
    startScale1: 1,
    startScale2: 0.8,
    startScale3: 0.5
  },

  lifetimes: {
    attached() {
      this.setData({
        headImgData:[],
        headImgAnimal:[],
        childName: "",
      })
      get('family/list', {
        "filter_unicode_eq_s": wx.getStorageSync('unicode'),
        "filter_memberAlias_notIn_ss": '爸爸,妈妈',
        "filter_bankAccount.status_eq_s":'USED',
        "orderBy": "birthday",
        "joinDomain": "bankAccount"
      }, (headImages) => {
        if (headImages.length == 0) {
          headImages.push({
            bankAccount: { currentBalance: 0, id: -1 },
            memberName: "",
            headPicPath: "user.png"
          })
        }

        headImages.forEach((item, index) => {
          item.index = index;
        })

        this.setData({
          headImgData: headImages,
          childName: headImages[0].memberName
        })

        this.triggerEvent('onChangeHead', {
          activeCard: headImages[0],
          activeIndex: 0
        });

        this.data.headImgAnimal = shared(0);
        this.bindCardWorklet();
      })


    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    bindCardWorklet() {
      for (let element of this.data.headImgData) {
        element.cardX = shared(0);
        element.scale = shared(0);
        element.opacity = shared(0);

        element.opacity.value = 1;

        if (element.index == 0) {
          element.scale.value = this.data.startScale1
          element.cardX.value = this.data.startX1
        } else if (element.index == 1) {
          element.scale.value = this.data.startScale2
          element.cardX.value = this.data.startX2
        } else if (element.index == 2) {
          element.scale.value = this.data.startScale3
          element.cardX.value = this.data.startX3
        } else {
          element.scale.value = 1
          element.cardX.value = 0
        }
      }

      this.data.headImgAnimal.value = this.data.headImgData;


      for (let element of this.data.headImgData) {
        this.applyAnimatedStyle('.card-item-' + element.index, () => {
          'worklet';
          return {
            opacity: element.opacity.value,
            transform: `translateX(${element.cardX.value}px) scale(${element.scale.value}) `,
          };
        });
      }

    },
    changeCard(activeCard) {
      this.triggerEvent('onChangeHead', activeCard);
    },
    scrollNextCard() {

      const tempCards = [];

      for (let i = 0; i < this.data.headImgData.length; i++) {
        let element = { ...this.data.headImgData[i] };
        tempCards.push(element);
        if (element.index == 0) {
          element.index = this.data.headImgData.length - 1;
        } else {
          element.index -= 1;
        }
      }

      const activeChild = tempCards.filter(item => item.index == 0)[0];

      this.setData({
        childName: activeChild.memberName,
        headImgData: [...tempCards]
      })

      this.data.headImgAnimal.value = [...tempCards];

    },
    onGestureEvent(e) {
      'worklet'
      let firtCardx, opacity1, cardX1, cardX2, cardX3, scale1, scale2, scale3, activeCard, activeIndex;

      let headImgData = this.data.headImgAnimal.value;

      for (let i = 0; i < headImgData.length; i++) {
        const element = headImgData[i];
        if (element.index == 0) {
          firtCardx = element.cardX;
        }
      }

      for (let i = 0; i < headImgData.length; i++) {
        const element = headImgData[i];
        if (element.index == 0) {
          opacity1 = element.opacity;
          cardX1 = element.cardX;
          scale1 = element.scale;
        } else if (element.index == 1) {
          activeCard = element;
          activeIndex = i;
          cardX2 = element.cardX;
          scale2 = element.scale;
        } else if (element.index == 2) {
          cardX3 = element.cardX;
          scale3 = element.scale;
        }
      }

      let stepLengthx = e.deltaX;
      let absx = Math.abs(firtCardx.value - this.data.startX1);

      if (e.state == 2) {
        if (absx < 15) {
          stepLengthx = e.deltaX * 0.7;
        } else if (absx < 25) {
          stepLengthx = stepLengthx * 0.5
        } else if (absx < 35) {
          stepLengthx = stepLengthx * 0.4
        } else {
          stepLengthx = stepLengthx * 0.2
        }

        let scaleValue = stepLengthx < 0 ? 0.001 : -0.001;
        if (scale1.value < 1.1) {
          scaleValue = stepLengthx < 0 ? 0.001 : -0.001;
        } else {
          scaleValue = stepLengthx < 0 ? 0.0005 : -0.0005;
        }

        cardX1.value += stepLengthx
        cardX2.value += stepLengthx * 0.5
        if (cardX3) {
          cardX3.value += stepLengthx * 0.3
        }
        scale1.value += scaleValue
        scale2.value += scaleValue
        if (scale3) {
          scale3.value += scaleValue
        }

      }

      if (e.state == 3) {
        const fun = this.scrollNextCard.bind(this);
        const changeCardFun = this.changeCard.bind(this);

        if (e.velocityX < -500 || absx > 20) {
          const cardx1Value = headImgData.length == 2 ? this.data.startX2 : this.data.startX3;
          opacity1.value = timing(0, { duration: 600 });
          cardX1.value = sequence(timing(-80, {
            duration: 600,
            easing: Easing.bezier(.35, .34, .02, 1),
          }), timing(cardx1Value, { duration: 10 }, function () {
            //  重新排列卡片显示顺序
            runOnJS(fun)()
            opacity1.value = timing(1, { duration: 600 });
          }));
          cardX2.value = timing(this.data.startX1, {
            duration: 600,
            easing: Easing.bezier(.25, .1, .25, 1),
          }, function () {
            //触发active回调函数
            runOnJS(changeCardFun)({ activeCard, activeIndex })
          });
          if (cardX3) {
            cardX3.value = timing(this.data.startX2, {
              duration: 600,
              easing: Easing.bezier(.25, .1, .25, 1),
            });
          }

          const scaleValue = headImgData.length == 2 ? this.data.startScale2 : this.data.startScale3;
          scale1.value = timing(scaleValue, {
            duration: 800,
            easing: Easing.bezier(.25, .1, .25, 1),
          });
          scale2.value = timing(this.data.startScale1, {
            duration: 800,
            easing: Easing.bezier(.35, .34, .02, 1),
          });
          if (scale3) {
            scale3.value = timing(this.data.startScale2, {
              duration: 800,
              easing: Easing.bezier(.25, .1, .25, 1),
            });
          }

        } else {
          cardX1.value = timing(this.data.startX1, {
            duration: 800,
            easing: Easing.bezier(.35, .34, .02, 1),
          });
          cardX2.value = timing(this.data.startX2, {
            duration: 800,
            easing: Easing.bezier(.25, .1, .25, 1),
          });
          if (cardX3) {
            cardX3.value = timing(this.data.startX3, {
              duration: 900,
              easing: Easing.bezier(.25, .1, .25, 1),
            });
          }

          scale1.value = timing(this.data.startScale1, {
            duration: 800,
            easing: Easing.bezier(.35, .34, .02, 1),
          });
          scale2.value = timing(this.data.startScale2, {
            duration: 800,
            easing: Easing.bezier(.25, .1, .25, 1),
          });
          if (scale3) {
            scale3.value = timing(this.data.startScale3, {
              duration: 800,
              easing: Easing.bezier(.25, .1, .25, 1),
            });
          }
        }
      }
    },
  }
})